<template>
  <view class="sunny-video" :style="{ width: elVideoWidth.strNum, height: elVideoHeight.strNum }">
    <video
      :style="{ width: elVideoWidth.strNum, height: elVideoHeight.strNum }"
      id="sunnyVideo"
      ref="sunnyVideo"
      :title="title"
      :src="src"
      :show-center-play-btn="false"
      :controls="controls"
      :enable-play-gesture="enablePlayGesture"
      :loop="loop"
      :muted="muted"
      :autoplay="autoplay"
      @timeupdate="timeupdate"
      enable-play-gesture
      :show-mute-btn="showMuteBtn"
      @play="play"
      @pause="pause"
      @ended="ended"
      @error="playError"
      @fullscreenchange="fullscreenchange"
      :danmu-list="danmuList"
      :danmu-btn="true"
      :http-cache="true"
      :play-strategy="2"
    >
      <cover-view
        v-if="!isPlay"
        class="banner-view"
        :style="{ width: elVideoWidth.strNum, height: elVideoHeight.strNum }"
      >
        <cover-image
          class="banner"
          :style="{ width: elVideoWidth.strNum, height: elVideoHeight.strNum }"
          :src="poster"
          mode
          @click="changePlay"
        ></cover-image>
        <cover-image
          class="imgPal"
          :style="{
            width: playBtnHeight.strNum,
            height: playBtnHeight.strNum,
            top: `${elVideoHeight.intNum / 2}px`,
            left: `${elVideoWidth.intNum / 2}px`,
            transform: `translate(-${playBtnHeight.intNum / 2}px,-${playBtnHeight.intNum / 2}px)`,
          }"
          @click="changePlay"
          :src="playImg"
        ></cover-image>
      </cover-view>
      <!-- 倍速标记 -->
      <cover-view
        v-if="isPlay && !isShowRateBox"
        class="speedText"
        :style="{
          top: `${
            isFullScreen
              ? screenInfo.width / 2 - 14.5 + 'px'
              : elVideoHeight.intNum / 2 - 14.5 + 'px'
          }`,
        }"
        @click="isShowRateBox = true"
      >
        <!-- #ifdef APP-NVUE -->
        <text class="text">{{ rateText }}X</text>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <cover-view class="text" @click="isShowRateBox = true">{{ rateText }}X</cover-view>
        <!-- #endif -->
      </cover-view>
      <cover-view
        v-if="isShowRateBox"
        class="vertical"
        :class="{ 'vertical-full': isFullScreen }"
        :style="[verticalStyle.vertical]"
      >
        <cover-view class="options" :style="[verticalStyle.options]" @click="isShowRateBox = false"></cover-view>
        <!-- #ifdef APP-NVUE -->
        <view class="speed-box" :style="[verticalStyle.speedBox]">
          <text
            class="speed-text"
            :class="{ act: item.isTo }"
            v-for="(item, index) in rateList"
            :key="item.name"
            @click="changeRate(item, index)"
          >{{ item.name }}X</text>
        </view>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <cover-view class="speed-box" :style="[verticalStyle.speedBox]">
          <cover-view
            class="speed-text"
            :class="{ act: item.isTo }"
            v-for="(item, index) in rateList"
            :key="item.name"
            @click="changeRate(item, index)"
          >{{ item.name }}X</cover-view>
        </cover-view>
        <!-- #endif -->
      </cover-view>
      <!-- 试看盒子 -->
      <cover-view
        v-if="visibleTrialEndBox"
        class="trialEndBox"
        :style="{ width: trialStyle.width, height: trialStyle.height }"
      >
        <!-- #ifdef APP-NVUE -->
        <text class="tipText">{{ tipText }}</text>
        <text class="closeBtn" @click.stop="handleClickTrialEnd">{{ btnText }}</text>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <cover-view class="tipText">{{ tipText }}</cover-view>
        <cover-view class="closeBtn" @click.stop="handleClickTrialEnd">{{ btnText }}</cover-view>
        <!-- #endif -->
      </cover-view>
    </video>
    <!-- 底部内容标题 -->

    <view class="uni-media-list-title" style="color: #69a3e1; font-size: 50rpx">#{{ title }}</view>

    <view class="uni-list uni-common-mt">
      <view class="uni-list-cell">
        <view>
          <view class="uni-label">弹幕内容:</view>
        </view>
        <view class="uni-list-cell-db">
          <input
            v-model="danmuValue"
            class="uni-input"
            type="text"
            placeholder="在此处输入弹幕内容"
            style="height: 120rpx"
          />
        </view>
        <view class="uni-btn-v">
          <button @click="sendDanmu" class="page-body-button" style="background-color: #69a3e1">发送弹幕</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPx, addUnit, sys } from './function.js'
import playIcon from '../../static/play.png'
export default {
  props: {
    // 视频地址
    src: {
      type: String,
      default: '',
    },
    // 视频标题
    title: {
      type: String,
      default: '',
    },
    // 视频封面
    poster: {
      type: String,
      default: '',
    },
    // 视频高度
    videoHeight: {
      type: [String, Number],
      default: '230px',
    },
    /**
     * 视频宽度 v1.1.3
     */
    videoWidth: {
      type: [String, Number],
      default: '750rpx',
    },
    // 播放图片按钮宽高
    playImgHeight: {
      type: [String, Number],
      default: '70rpx',
    },
    // 暂停按钮
    playImg: {
      type: String,
      default: () => playIcon,
    },
    // 是否显示静音按钮
    showMuteBtn: {
      type: Boolean,
      default: false,
    },
    // 播放完毕是否退出全屏
    isExitFullScreen: {
      type: Boolean,
      default: true,
    },
    /**
     * 主题色
     */
    primaryColor: {
      type: String,
      default: '#5C91EF',
    },
    /**
     * 试看提示的文字
     */
    tipText: {
      type: String,
      default: '试看已结束，本片是会员专享内容',
    },
    /**
     * 试看按钮的文字
     */
    btnText: {
      type: String,
      default: '成为会员免费观看',
    },
    // 视频试看时间（秒）
    trialTime: {
      type: Number,
      default: 0,
    },
    /**
     * 倍速盒子宽度 v1.1.3
     */
    speedBoxWidth: {
      type: [String, Number],
      default: '160rpx',
    },
    /**
     * 是否循环播放 v1.1.3
     */
    loop: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否静音播放 v1.1.3
     */
    muted: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否自动播放
     */
    autoplay: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      videoCtx: '', //视频上下文
      isPlay: false, // 视频是否播放过
      isShowRateBox: false, // 是否显示倍速盒子
      rateText: '1.0', // 当前倍速
      rateList: [
        {
          name: '0.5',
          isTo: false,
        },
        {
          name: '0.8',
          isTo: false,
        },
        {
          name: '1.0',
          isTo: true,
        },
        {
          name: '1.25',
          isTo: false,
        },
        {
          name: '1.5',
          isTo: false,
        },
        // #ifdef MP-WEIXIN
        {
          name: '2.0',
          isTo: false,
        },
        // #endif
      ], //倍数
      isFullScreen: false, //全屏状态
      // 屏幕信息
      screenInfo: {
        width: 0,
        height: 0,
      },
      visibleTrialEndBox: false, // 控制试看结束内容显示隐藏
      enablePlayGesture: false, // 是否开启播放手势，即双击切换播放/暂停
      controls: false, // 是否显示原生控件
      danmuList: [
        //弹幕数组
        {
          text: '第 1s 出现的弹幕',
          color: '#ff0000',
          time: 1,
        },
        {
          text: '第 3s 出现的弹幕',
          color: '#ff00ff',
          time: 3,
        },
      ],
      danmuValue: '',
    }
  },
  computed: {
    /**
     * 视频单位高度信息
     * @return {Object} {intNum:纯数字，strNum:携带rpx单位}
     */
    elVideoHeight() {
      return {
        intNum: getPx(this.videoHeight),
        strNum: addUnit(this.videoHeight),
      }
    },
    /**
     * 视频单位宽度信息
     * @return {Object} {intNum:纯数字，strNum:携带rpx单位}
     */
    elVideoWidth() {
      return {
        intNum: getPx(this.videoWidth),
        strNum: addUnit(this.videoWidth),
      }
    },
    /**
     * 播放图片按钮宽高信息
     * @returns {Object} { intNum:不带单位, strNum:携带rpx单位 }
     */
    playBtnHeight() {
      return {
        intNum: getPx(this.playImgHeight),
        strNum: addUnit(this.playImgHeight),
      }
    },
    /**
     * 试看盒子样式 V1.1.0
     * @returns {Object} {height,width}
     */
    trialStyle() {
      return {
        height: this.isFullScreen ? `${this.screenInfo.width}px` : this.elVideoHeight.strNum,
        width: this.isFullScreen ? `${this.screenInfo.height}px` : this.elVideoWidth.strNum,
      }
    },
    /**
     * 倍速盒子宽度信息 v1.1.3
     * @return {Object} {intNum:纯数字，strNum:携带rpx单位}
     */
    elSpeedBoxWidth() {
      return {
        intNum: getPx(this.speedBoxWidth ? this.speedBoxWidth : 160),
        strNum: addUnit(this.speedBoxWidth ? this.speedBoxWidth : 160),
      }
    },
    /**
     * 倍速盒子样式信息 v1.1.4
     * @return {Object}
     */
    verticalStyle() {
      let obj = {
        vertical: {
          width: '',
          height: '',
        },
        options: {
          width: '',
          height: '',
        },
        speedBox: {
          width: '',
          height: '',
        },
      }
      if (this.isFullScreen) {
        // 全屏时
        obj.vertical.width = `${this.screenInfo.height}px`
        obj.vertical.height = `${
          this.isShowRateBox ? this.screenInfo.width : this.screenInfo.width - 40
        }px`
        obj.options.width = `${this.screenInfo.height - this.elSpeedBoxWidth.intNum}px`
        obj.options.height = `${this.screenInfo.width}px`
        obj.speedBox.width = `${this.elSpeedBoxWidth.intNum}px`
        obj.speedBox.height = `${this.screenInfo.width}px`
        return obj
      } else {
        obj.vertical.width = this.elVideoWidth.strNum
        obj.vertical.height = `${
          this.isShowRateBox ? this.elVideoHeight.intNum : this.elVideoHeight.intNum - 44
        }px`
        obj.options.width = `${this.elVideoWidth.intNum - this.elSpeedBoxWidth.intNum}px`
        obj.options.height = this.elVideoHeight.strNum
        obj.speedBox.width = this.elSpeedBoxWidth.strNum
        obj.speedBox.height = this.elVideoHeight.strNum
        return obj
      }
    },
  },
  mounted() {
    this.videoCtx = uni.createVideoContext('sunnyVideo', this)
    this.getScreenInfo()
  },
  methods: {
    // 实现弹幕发送
    sendDanmu: function () {
      this.videoCtx.sendDanmu({
        text: this.danmuValue,
        color: this.getRandomColor(),
      })
      this.danmuValue = ''
    },
    videoErrorCallback: function (e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false,
      })
    },
    getRandomColor: function () {
      const rgb = []
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length == 1 ? '0' + color : color
        rgb.push(color)
      }
      return '#' + rgb.join('')
    },
    /**
     * 点击试看结束按钮 V1.1.6
     * @param {Event} e
     */
    handleClickTrialEnd(e) {
      if (e.hasOwnProperty('touches')) {
        this.$emit('handleBtn')
      }
      // 跳转到vip页面
      uni.navigateTo({
        url: '../../../../huiyuan_VIP/index',
      })
    },
    // 获取元素信息
    getDomInfo(elId) {
      return new Promise((resolve) => {
        const view = uni.createSelectorQuery().select(`#${elId}`)
        view
          .boundingClientRect((data) => {
            resolve(data.height)
          })
          .exec()
      })
    },
    /**
     * 当开始/继续播放时触发play事件 - 会触发emit事件
     * @param {EventHandle} e
     */
    play(e) {
      this.isPlay = true
      this.controls = true
      console.log(this.src, '我看看')
      this.enablePlayGesture = true
      // this.uploadVideo()
      this.$emit('play', e)
    },
    // // 下载视频
    // uploadVideo() {
    //   // 提醒用户下载中
    //   uni.showToast({ title: '下载中', icon: 'loading' })
    //   // 1 将远程文件下载到小程序的内存中
    //   uni.downloadFile({
    //     url: this.src,
    //     success: (res) => {
    //       // 2 成功下载后而且状态码为200时将视频保存到本地系统
    //       if (res.statusCode === 200) {
    //         uni.saveVideoToPhotosAlbum({
    //           filePath: res.tempFilePath,
    //         })
    //         uni.hideLoading()
    //         // 提示用户下载成功
    //         uni.showToast({ title: '下载成功', icon: 'success' })
    //       }
    //       // 如果该资源不可下载或文件格式出错则提示用户
    //       else {
    //         uni.showToast({ title: '资源格式错误，请联系管理员' })
    //       }
    //     },
    //     fail: (err) => {
    //       // 下载失败提醒
    //       uni.hideLoading()
    //       uni.showToast({ title: '下载失败' })
    //     },
    //   })
    // },
    // 监听视频暂停
    pause() {
      this.$emit('pause')
    },
    /**
     * 视频播放出错 - 会触发emit事件
     * @param {Object} e 错误信息
     */
    playError(e) {
      this.$emit('playError', e)
    },
    /**
     * 监听视频结束 - 会触发emit事件
     */
    ended() {
      this.$emit('videoEnded')
      if (!this.isExitFullScreen) return
      this.videoCtx.exitFullScreen() //退出全屏
    },
    onBack() {
      uni.navigateBack()
    },
    /**
     * 视频播放进度变化 - 会触发emit事件
     * @param {Object} e event.detail = {currentTime, duration}
     */
    timeupdate(e) {
      this.$emit('timeupdate', e)
      // 是否判断需要视频试看 V1.1.0
      if (this.trialTime <= 0) return
      if (e.detail.currentTime >= this.trialTime) {
        this.$emit('trialEnd')
        this.showTrialEnd()
        this.enablePlayGesture = false
        this.controls = false
      }
    },
    /**
     * 切换倍速
     * @param {Object} item 当前点击项
     * @param {Object} index 倍速索引
     */
    changeRate(item, index) {
      if (item.isTo) return (this.isShowRateBox = false)
      this.rateList.forEach((v, i) => {
        i == index ? (v.isTo = true) : (v.isTo = false)
      })
      this.videoCtx.playbackRate(item.name * 1)
      this.rateText = item.name
      this.isShowRateBox = false
    },
    /**
     * 播放视频
     */
    changePlay() {
      this.$nextTick(() => {
        this.videoCtx.play()
        /* this.rateText ='1.0'
					this.videoCtx.playbackRate(1) */
      })
    },
    /**
     * 暂停播放 v1.1.3
     */
    changePause() {
      this.$nextTick(() => {
        this.videoCtx.pause()
      })
    },
    /**
     * 全屏操作 - 会触发emit
     */
    fullscreenchange() {
      this.isFullScreen = !this.isFullScreen
      this.$emit('fullscreenchange', this.isFullScreen)
    },
    /**
     * 获取屏幕信息
     */
    getScreenInfo() {
      const res = sys()
      this.screenInfo.width = res.screenWidth
      this.screenInfo.height = res.screenHeight
    },
    /**
     * 控制试看模块显示 V1.1.0
     */
    showTrialEnd() {
      this.visibleTrialEndBox = true
      this.videoCtx.pause()
    },
    /**
     * 控制试看模块隐藏 V1.1.0
     */
    closeTrialEnd() {
      this.visibleTrialEndBox = false
      this.changePlay()
    },
    /**
     * 跳转到指定位置，单位 s
     * @param {Object} position
     * @description V1.1.1
     */
    seek(position) {
      this.$nextTick(() => {
        this.videoCtx.seek(position)
        this.$emit('changeSeek')
        /* uni.showToast({
						title:'已为您跳转至上次观看位置',
						icon:'none'
					}) */
      })
    },
  },
}
</script>

<style lang="scss">
$primary: #5c91ef;
//css函数
/* #ifdef APP-NVUE */
@function tovmin($rpx) {
  //$rpx为需要转换的字号
  /* #ifdef VUE2 */
  @return #{$rpx}rpx;
  /* #endif */
  /* #ifdef VUE3 */
  @return #{calc($rpx / 2)}px;
  /* #endif */
}
/* #endif */

/* #ifndef APP-NVUE */
@function tovmin($rpx) {
  //$rpx为需要转换的字号
  /* #ifdef VUE2 */
  @return #{$rpx * 100 / 750}vmin;
  /* #endif */
  /* #ifdef VUE3 */
  @return #{calc($rpx * 100 / 750)}vmin;
  /* #endif */
}
/* #endif */

.sunny-video {
  position: relative;
  z-index: 0;
  .speedText {
    position: absolute;
    top: tovmin(240);
    right: tovmin(30);
    z-index: 5;
    padding: tovmin(10);
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    .text {
      display: flex;
      width: tovmin(80);
      font-size: tovmin(32);
      color: $primary;
      text-align: center;
    }
  }
}
.banner-view {
  position: relative;
  .imgPal {
    position: absolute;
    z-index: 2;
    top: 240rpx;
    left: 375rpx;
    transform: translate(-35rpx, -35rpx);
    width: 70rpx;
    height: 70rpx;
  }
}
.vertical {
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  &.vertical-full {
    position: relative;
    .speed-box {
      padding: tovmin(50) 0;
    }
  }
  .speed-box {
    position: absolute;
    right: 0;
    top: 0;
    /* #ifndef APP-NVUE */
    display: flex;
    box-sizing: border-box;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* #ifdef APP-NVUE */
    // v1.1.3
    padding: 10px 0;
    /* #endif */
    background-color: rgba(0, 0, 0, 0.7);
    .speed-text {
      width: tovmin(160);
      text-align: center;
      font-size: tovmin(28);
      color: #fff;
      /* #ifdef APP-NVUE */
      padding: tovmin(10) 0px;
      /* #endif */
      /* #ifndef APP-NVUE */
      // v1.1.3
      height: tovmin(60);
      line-height: tovmin(60);
      box-sizing: border-box;
      &:first-child {
        margin-top: 10px;
      }
      &:last-child {
        margin-bottom: 15px;
      }
      /* #endif */
      &.act {
        color: $primary;
        font-size: tovmin(32);
      }
    }
  }
}
// 试看结束盒子
.trialEndBox {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  // backdrop-filter: blur(14px);
  background-color: rgba(0, 0, 0, 0.9);
  .tipText {
    font-size: tovmin(28);
    color: #fff;
  }
  .closeBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: tovmin(350);
    height: tovmin(75);
    margin: tovmin(32) 0 0;
    font-size: tovmin(30);
    line-height: tovmin(75);
    border-radius: tovmin(42);
    color: #fff;
    text-align: center;
    background-color: $primary;
  }
}
.uni-list {
  // 实现弹幕样式
  display: flex;
  flex-direction: column;
  width: 100%;
}
.uni-list-cell {
  display: flex;
}
.uni-list-cell-db {
  height: 100%;
  //盒子阴影
}
</style>
